<template>
  <div class="tasklobby">
    <div class="tips">
      <span>*</span>每条任务只能做一次
    </div>
    <div class="content">
      <div
        class="item"
        v-for="(item,index) in list"
        :key="index"
        @click="goInfo(item.id,item.task_title)"
      >
        <div>
          <img
            src="../../assets/images/07.png"
            alt=""
          >
          <div>
            <p>{{item.task_title}}</p>
            <p>{{item.thetask}}<span>{{item.task_num}}</span></p>
          </div>
        </div>
        <div>
          <div>
            <p class="price">￥{{item.agentprice}}</p>
              <p  v-if="item.task_queue_status == 1" style="color: rgb(254,117,11);">【预热中】</p>
              <p  v-else-if="item.task_queue_status == 2" style="color:grey">【已领取】</p>
              <p  v-else-if="item.task_queue_status == 3" style="color:green">【可领取】</p>
          </div>
          <i class="icon iconfont icon-xiangyou"></i>
        </div>
      </div>
    </div>
    <div
      class="null"
      v-if="isfull"
    >
      <img
        src="../../assets/images/nullData.png"
        alt=""
      >
      <p>没有数据</p>
    </div>
  </div>
</template>
<script>
import { tasklist } from "../../api/user";
export default {
  data() {
    return {
      isfull: false,
      list: [],
      listParameter:{
        pageno:1,
        pagesize:30,
        count:0,
      }
    };
  },
  methods: {
    getData() {
      tasklist(this.listParameter).then(res => {
        if (res.status == 200) {
          this.list = res.data.list;
          this.listParameter.count = res.data.count
          if (res.data.count == 0) {
            this.isfull = true;
          }
        }
      });
    },
    goInfo(id) {
      this.$router.push({
        path: "/taskinfo",
        query: {
          died: id,
        }
      });
    }
  },
  created() {
    this.getData();
  }
};
</script>
<style lang="scss">
.tasklobby {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  header {
    color: #fff;
  }
  .pyq {
    width: 100%;
    img {
      width: 100%;
    }
  }
  .null {
    // position: fixed;
    // left: 50%;
    // top: 60%;
    // transform: translate(-50%, -80%);
    text-align: center;
    p {
      padding-top: 8px;
      font-size: 16px;
      font-weight: 500;
      text-align: center;
      color: #999;
    }
  }
  .tips {
    padding: 15px;
    span {
      color: red;
    }
  }
  .content {
    width: 100%;
    .item {
      margin-bottom: 5px;
      width: 100%;
      height: 45px;
      display: flex;
      display: -webkit-flex;
      justify-content: space-between;
      padding: 0 15px;
      align-items: center;
      background-color: #fff;
      img {
        width: 30px;
        margin-right: 10px;
      }
      > div {
        display: flex;
        display: -webkit-flex;
        justify-content: space-between;
        align-items: center;
      }
      .price {
        text-align: center;
        color: #e71434;
        font-size: 16px;
        font-weight: 500;
      }
    }
  }
  .text {
    span {
      color: #e71434;
    }
    padding: 15px;
    p {
      padding: 3px;
    }
    h3 {
      font-size: 14px;
      font-weight: 500;
    }
  }
}
</style>

